<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <meta name="viewport"  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>弹窗</title>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js"></script>
</head>

<body>
<b><span th:text="${cid}"></span></b>
<input id="start">
<input id="message">
<iframe id="my_iframe" style="display:none;"></iframe>
<script type="application/javascript">
    var socket;
    if(typeof(WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    }else{
        console.log("您的浏览器支持WebSocket");
//实现化WebSocket对象，指定要连接的服务器地址与端口 建立连接
//等同于socket = new WebSocket("ws://localhost:8083/checkcentersys/websocket/20");
//socket = new WebSocket("http://localhost:8080/websocket/${cid}".replace("http","ws"));
        socket = new WebSocket("ws://192.168.0.128:8080/websocket/33");
//打开事件
        socket.onopen = function() {
            console.log("Socket 已打开");
            $("#start").val("Socket 已打开")
//socket.send("这是来自客户端的消息" + location.href + new Date());
        };
//获得消息事件
        socket.onmessage = function(msg) {
            console.log(msg.data);
            $("#message").val(msg.data)
//发现消息进入 开始处理前端触发逻辑
        };
//关闭事件
        socket.onclose = function() {
            console.log("Socket已关闭");
            $("#close").val("Socket已关闭")
        };
//发生了错误事件
        socket.onerror = function() {
            alert("Socket发生了错误");
//此时可以尝试刷新页面
        }
//离开页面时，关闭socket
//jquery1.8中已经被废弃，3.0中已经移除
// $(window).unload(function(){
// socket.close();
//});
    }
</script>

</body>
</html>